<template lang="pug">
el-dialog(
  :visible.sync="show"
  width="900px"
  top="5vh"
  @open="beforeOpen"
  :before-close="handleClose"
  custom-class="dialog-border"
  :close-on-click-modal="false"
)
  .modal-title(slot="title") 修改样品库存
  .modal-content
    .sample-name 样品名称：{{detail.sampleName}}
    .sample-name 货架位置：{{detail.shelfLocation}}
    .spec-sku-table-body
      navbar(:navbar="detail.sampleData.table.header" isHandle)
      .table-list
        .table-tr(v-for="row, rowIndex in detail.sampleData.table.body" :key="rowIndex")
          .table-td(
            v-for="item,index in row"
            :key="index"
          )
            .table-td-body.table-td-input(v-if="index > (row.length - 3)")
              .table-td-body(v-if="index === (row.length - 2)") {{row[index]}}
              el-input(size="mini" placeholder="请输入库存" v-model="row[index]" @change="changeCostPrice(item, index, row)" type="number" v-if="index === (row.length - 1)")
            .table-td-body(v-else) {{item}}
  .modal-footer(slot="footer")
    el-button(size="small" @click="handleClose") 取消
    el-button(size="small" name="primary" @click="save") 确定
</template>

<script>
import { getSampleDetail, saveSample } from 'api'
import navbar from '@/components/navbar'
export default {
  name: 'changeStockModal',
  props: {
    show: Boolean,
    item: Object
  },
  components: {
    navbar
  },
  data () {
    return {
      skuForm: {
        unit: '',
        store_count: ''
      },
      detail: {
        sampleData: {
          table: {
            header: [],
            body: []
          }
        }
      }
    }
  },
  methods: {
    beforeOpen () {
      this.getDetail()
    },
    async save () {
      try {
        let reg1 = /^[+]{0,1}(\d+)$/
        let sampleNum = 0
        this.detail.sampleData.table.body.forEach((item, index) => {
          let len = item.length
          if (reg1.test(parseFloat(item[len - 1]))) sampleNum++
        })
        if (sampleNum !== this.detail.sampleData.table.body.length) {
          this.$message.error('请输入正确的物料间样品库存！')
          return
        }
        this.submitLoading = this.$loading({
          lock: true,
          text: '数据提交中...',
          spinner: 'el-icon-loading',
          background: 'rgba(0, 0, 0, 0.7)'
        })
        await this.$axios.post(saveSample, { ...this.detail })
        this.submitLoading.close()
        this.$message.success('库存量修改成功')
        this.$emit('save')
      } catch (err) {
        this.submitLoading.close()
        this.locking = false
        this.$message.error(err.message || err.ResultSet.errors)
      }
    },
    // 单个修改规格价格
    changeCostPrice (val, index, row) {
      let reg = /^\d+(\.\d+)?$/
      if (!reg.test(val)) {
        this.$message.error('请输入正确的数字！')
        this.vaild = true
      } else {
        this.vaild = false
      }
    },
    async getDetail () {
      try {
        const { ResultSet } = await this.$axios.post(getSampleDetail, { id: this.item.materialsSampleId })
        this.detail = ResultSet.userData.addSampleDto
      } catch (err) {
        this.$message.error(err.message || err.ResultSet.errors)
      }
    },
    handleClose () {
      this.$emit('close')
    }
  },
}
</script>

<style lang="scss" scoped>
.table-list {
  & .table-tr {
    display: flex;
    & .table-td {
      display: flex;
      align-items: center;
      justify-content: center;
      min-height: 44px;
      min-width: 100px;
      flex: 1;
      border: 1px solid #DDD;
      border-top: none;
      border-right: none;
      &:last-child {
        border-right: 1px solid #DDD;
      }
      & .table-td-body {
        text-align: center;
        &.table-td-input {
          width: 100px;
        }
      }
    }
  }
}
.sample-name {
  margin-bottom: 5px;
  font-size: 14px;
}
</style>